<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- rel="stylesheet" 这个不能少，否则页面无法加载css文件 -->
<!--    <link href="../frm/sweetalert2/css/sweetalert2.css" rel="stylesheet" type="text/css"></link>-->
    <link href="../frm/sweetalert2/css/dark/dark.css" rel="stylesheet" type="text/css"></link>
    <style>

    </style>

</head>
<body>
<div id="app">

    <student name="张三" sex="男" :age="18"></student>
    <student name="李四" sex="男" :age="18"></student>
    <student name="王五" sex="男"></student>



</div>
<script src="../frm/sweetalert2/js/sweetalert2.js"></script>
<script src="../frm/vue.js"></script>
<script src="../frm/vue-router.js"></script>

<script>

    let student = Vue.extend({
        name: "Student",
        template: `
          <div>
          <h1>{{ msg }}</h1>
          <h1>{{ name }}</h1>
          <h1>{{ sex }}</h1>
          <h1>{{ age + 1 }}</h1>
          <h1>{{myAge}}</h1>
          <button @click="incAge">IncreaseAge</button>
          <button @click="dialog">Dialog</button>
          </div>
        `,
        data() {
            return {
                msg: "这是一个学生",
                myAge:this.age
            }
        },
        methods:{
            incAge(){
                this.myAge++;
            },
            dialog(){
                console.log("dialog");
                Swal.fire("title","content","info");
                console.log("end");
            }
        },
        // props: ["name", "age", "sex"] // OK
        // props: {
        //     name:String,
        //     age:Number,
        //     sex:String
        // }
        props: {
            name: {
                type: String,
                required: true
            },
            age: {
                type: Number,
                default: 99
            },
            sex: {
                type: String,
                required: false
            }
        }
    });

    new Vue({
        el: "#app",
        components: {
            student
        },

    })


</script>

</body>
</html>
